<!DOCTYPE html>
<html lang="en" class="md device-pixel-ratio-3 device-retina device-desktop device-windows support-position-sticky">

<head>
    <meta charset="utf-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <link rel="apple-touch-icon" href="favicon.ico" />
    <meta name="apple-mobile-web-app-title" content="坏坏漫画" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="referrer" content="never">
    <script type="text/javascript" src="js/debug.js"></script>
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>坏坏漫画</title>
    <link href="css/main.48b4036a.css" rel="stylesheet">
    <link href="css/aui.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="js/template-web.js"></script>
    <script type="text/javascript" src="js/aui-toast.js"></script>
    <script type="text/javascript" src="js/aui-dialog.js"></script>
    <script type="text/javascript" src="js/config.js" charset="utf-8"></script>
    <div style="display: none;">
    </div>

</head>

<body>
    <div id="root" style="height: 100%;">
        <div id="framework7-root" class="framework7-root ">
            <div class="panel-backdrop"></div>
            <div class="panel panel-left panel-reveal">
                <div id="chapterDirectory" class="page">
                    <div class="page-content">
                        <div class="block-title">目录</div>
                        <div class="no-margin-bottom list virtual-list">
                            <ul id="leftpannel" style="height: 5667.84px;">
                                <li class="bg-color-default text-color-primary"
                                    style="height: 0.48rem; top: 0px; font-size: 110%; font-weight: 700;"><a
                                        class="item-link" href="#">
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title">第1話-&lt;1&gt;</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-right panel-reveal">
                 <!-- 侧边栏 -->
                <div class="page" id="right-page">
                    <script>
                        $("#right-page").load("right-page.html");
                    </script>
                </div>
            </div>
            <div class="view view-main">

                <div class="view view-main">
                    <div id="bookChapters" class="page page-current page-with-subnavbar" data-name="bookChapters">
                        <div class="navbar">
                            <div class="navbar-inner sliding">
                                <div class="left"><a class="icon-only link icon-only back"
                                        href="javascript:history.go(-1);"><i class="icon icon-back"></i></a></div>
                                <div class="title">目录 · </div>
                                <div class="right"><a class="link icon-only panel-open" href="javascript:void(0)"
                                        onclick="pannelr()" data-panel="right"><i
                                            class="icon material-icons">dehaze</i></a></div>
                                <div class="subnavbar">
                                    <div class="subnavbar-inner"><a class="link" id="orders" data-value="1"
                                            href="javascript:void(0)" onclick="changeOrder();"><i
                                                class="icon material-icons">swap_vert</i>倒序</a>
                                        <div class="list no-hairlines">
                                            <ul>
                                                <li class="reader-book-chapters-smart-select"><a
                                                        class="item-link smart-select" href="#">
                                                        <div class="item-content" onclick="fenyeshow();">
                                                            <div class="item-inner">
                                                                <div class="item-title">分页</div>
                                                                <div class="item-after" id="fyshow">1 - 10</div>
                                                                <select name="selectedPage" class="selectedPage"
                                                                    onchange="onChangePageNo(this)">
                                                                    <option value="0">1 - 26</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="page-content hide-navbar-on-scroll">
                            <div class="no-margin reader-book-list list media-list">
                                <ul id="chapter_list_panel">

                                </ul>
                                <ul>
                                    <li class="media-item">
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title-row"></div>
                                                <div class="width-100 row">
                                                    <div class="col"><a class="button pager-btn" data-value="prev"
                                                            style="display: inline-block; width: auto; float: left;">上10<span
                                                                chapter-unit="cartoon"></span></a></div>
                                                    <div class="col"><a class="button pager-btn" data-value="next"
                                                            style="display: inline-block; width: auto; float: right;">下10<span
                                                                chapter-unit="cartoon"></span></a></div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <script type="text/html" id="can_read">
                    <div class='reader-chapter-order'>
                        <div class='elevation-10 margin-vertical-lg card'>
                            <div class='card-header'>
                                <div>
                                    <p>本章价格：50书币</p>
                                    <p><small>开通VIP，海量漫画免费看</small></p>
                                </div>
                            </div>
                            <div class='card-content card-content-padding'>
                                <ul style="padding-left:0">
                                    <li class=''>
                                        <div class='item-content'>
                                            <div class='item-inner' style="display: contents;">
                                                <div>自动购买下一<span chapter-unit='cartoon'></span></div>
                                                <label class='toggle'><input type='checkbox' value=''>
                                                    <span class='toggle-icon'></span>
                                                </label>
                                            </div>
                                        </div>
                                    </li>
                                    <li class=''>
                                        <div class='item-content'>
                                            <div class='item-inner'><a class='width-100 button button-fill color-red' href='/pay.html'>开通VIP</a></div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class='card-footer'>
                                <a class='link'><span class='text-color-gray font-size-12' id="bookCoin">余额：{{bookCoin}}书币</span></a>
                                <div class='display-flex'>
                                    <a class='link' href='/pay.html'> <span class='font-size-12 text-underline'>开通VIP，免费阅读</span></a>
                                    <span class='font-size-12 line-height-3x'> / </span> 
                                    <a class='link'> <span class='font-size-12 text-underline' onclick='share2()'>分享赚书币</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </script>
                

                <script type="text/html" id="comic_chpater_list">
                    {{each list value i}}
                    <li class="media-item" onclick="onRead(this)">
                        <a class="item-link" data-index="{{value['id']}}" data-title="{{value['title']}}" data-href="/details.html?id={{value['imagelist']}}&title={{value['title']}}&aid={{value['manhua_id']}}">
                            <div class="item-content">
                                <div class="item-media">
                                    <img slot="media" alt="" class="lazy lazy-fade-in lazy-loaded"  data-original="{{value['image']}}"  src="{{value['image']}}" style="width: 1rem; height: 0.5rem; margin-right: -0.16rem;">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <div class="item-title">{{value['title']}}</div>
                                        {{if value['isvip']==1}}
                                            {{if value['score']==0}}
                                            <div class="item-after"><span class="badge color-red">限免</span></div>
                                            {{else}}
                                                {{if value['buy']>0}}
                                                    <div class="item-after"><span class="badge color-red">已购</span></div>
                                                {{else}}
                                                    <div class="item-after"><span class="badge color-red">{{value['score']}}阅币</span></div>
                                                {{/if}}
                                            {{/if}}
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </script>

            </div>
            <div class="framework7-modals"></div>
            <div class="actions-backdrop"></div>
            <div class="dialog-backdrop"></div>
            <div class="dialog dialog-buttons-1 dialog-buttons-vertical reader-copy-modal modal-in"
                style="display: none; margin-top: -372px;">
                <div class="dialog-inner">
                    <div class="dialog-title"></div>
                    <div class="dialog-text"></div>
                    <input id="foo" type="link" value="" readonly="">
                </div>
                <div class="dialog-buttons">
                    <span class="dialog-button dialog-button-bold text-align-center text-color-primary"
                        data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</span>
                </div>
            </div>
            <div class="popover-backdrop"></div>
            <div class="toast">
                <div class="toast-content">
                    <div class="toast-icon"></div>
                    <div class="toast-text"></div>
                    <a class="toast-button"></a>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="js/yymh.js"></script>
    <script src="js/clipboard.min.js"></script>

    <script type="text/javascript">
        window.page = 1;
        window.order = 1;
        window.totalPage = 1;
        window.currPageNo = 1;
        window.bastCate = 1;
        //获取章节列表
        function getChapterList() {
            showLoadingToast('加载中...');
            let aid = getQueryVariable("id");
            appCenter.doGetChpaterList(aid, window.order, window.page, 10, function (data) {
                console.log(data);
                var html = "";
                var book = decodeURI(getQueryVariable("book"));
                html = template("comic_chpater_list", data);
                html = html.replace(/aid/g,"book="+book+"&aid");
                //显示分页组件
                showPager(data);
                $('#chapter_list_panel').html(html);
                $("img.lazy").lazyload();
                window.toast.hide();
            });
        }

        //切换列表
        function changeOrder() {
            var order = $("#orders").attr("data-value");
            if (order == 1) {
                $("#orders").attr("data-value", 0).html('<i class="icon material-icons">swap_vert</i>正序');
                window.order = 0;
                getChapterList();
            } else {
                $("#orders").attr("data-value", 1).html('<i class="icon material-icons">swap_vert</i>倒序');
                window.order = 1;
                getChapterList();
            }
        }
        //显示分页
        function showPager(data) {
            window.totalPage = data.totalPage;
            window.currPageNo = data.pageNumber;
            var pagerItems = '';
            for (i = 1; i <= window.totalPage; i++) {
                if (window.currPageNo == i) {
                    pagerItems += '<option value="' + i + '" selected="selected">' + (((i - 1) * 10) + 1) + '- ' + i * 10 + '</option>';
                } else {
                    pagerItems += '<option value="' + i + '">' + (((i - 1) * 10) + 1) + '- ' + i * 10 + '</option>';
                }
            }
            $('.selectedPage').html(pagerItems);
        }

        function fenyeshow() {
            $('.popover-backdrop').addClass('backdrop-in');
            innerhtml = "";
            innerhtml += '<div class="popover smart-select-popover modal-in popover-on-bottom" data-select-name="selectedPage" style="display: block; top: 120.969px; left: 323.125px;">';
            innerhtml += '<div class="popover-angle"></div>';
            innerhtml += '<div class="popover-inner">';
            innerhtml += '<div class="list smart-select-list-2b5019b1e7  "><ul>';
            for (i = 1; i <= window.totalPage; i++) {
                innerhtml += '<li class=""><label class="item-radio item-content">';
                if (window.currPageNo == i) {
                    innerhtml += '<input type="radio" name="radio-2b5019b1e7" onchange="cgpage()" value="' + i + '" checked="checked">';
                } else {
                    innerhtml += '<input type="radio" name="radio-2b5019b1e7" onchange="cgpage()" value="' + i + '" >';
                }
                innerhtml += '<i class="icon icon-radio"></i>';
                innerhtml += '<div class="item-inner">';
                innerhtml += '<div class="item-title">' + (((i - 1) * 10) + 1) + '- ' + i * 10 + '</div>';
                innerhtml += '</div></label></li>';
            }
            innerhtml += '</ul></div></div></div>';
            $('.popover-backdrop').after(innerhtml);
            // $('input[name="radio-2b5019b1e7"]').change(function(){
            //   	cgpage();
            // });

        }

        function cgpage() {
            window.page = $('input[name="radio-2b5019b1e7"]:checked').val();
            $('#fyshow').html((((window.page - 1) * 10) + 1) + '- ' + window.page * 10);
            $('.popover-backdrop').removeClass('backdrop-in');
            $('.popover-backdrop').hide();
            $('.popover').remove();
            getChapterList();

        }
        //初始化分页按钮事件
        function initPagerbtnEvent() {
            $('.pager-btn').click(function () {
                var vaule = $(this).data('value');
                if (vaule == 'first') {
                    if (window.page != 1) {
                        window.page = 1;
                        getChapterList();
                    }
                } else if (vaule == 'prev') {
                    if (window.page > 1) {
                        window.page--;
                        getChapterList();
                    }
                } else if (vaule == 'next') {
                    if (window.page < window.totalPage) {
                        window.page++;
                        getChapterList();
                    }
                } else if (vaule == 'last') {
                    if (window.page != window.totalPage) {
                        window.page = window.totalPage;
                        getChapterList();
                    }
                }
            });
        }
        //改变页索引
        function onChangePageNo(that) {
            window.page = $(that).val();
            getChapterList();
        }
        //打开阅读
        function onRead(obj) {
            let aid = getQueryVariable("id");
            let pid = $(obj).children(".item-link").attr("data-index");
            let bookName = decodeURI(getQueryVariable("book"))+'-'+$(obj).children(".item-link").attr("data-title");
            appCenter.doHeaderGet(baseApi + "/carton/app/isPay",{aid:aid,pid:pid,bookName:bookName},{'authToken':localStorage.getItem("authToken")},function (data) {
                if (data.code === 0) {
                    window.location.href = $(obj).children(".item-link").attr("data-href");
                }else{
                    $(".reader-chapter-order").hide();
                    let html = template("can_read", {bookCoin:appCenter.bookCoin});
                    $(obj).append(html); 
                }
            })
        }
        //初始化
        $(function () {
            getChapterList();
            initPagerbtnEvent();
        });
    </script>


</body>

</html>